<!DOCTYPE html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<div>
  <div style="width:500px;height:500px"><div id="test">hello</div></div>
</div>
<script>
'use strict';
// Test the parsing and the computed style values of the animations properties.

var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);

// This function checks the return value of computedStyle.animation and verifies Blink can parse it.
function checkAnimationShorthandValue() {
    var before = computedStyle.getPropertyValue('animation');
    e.style.animation = '';
    e.style.animation = before;
    return (computedStyle.getPropertyValue('animation') == before);
}

test(() => {
  style.animation = "";
  // Test initial value.
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "myShorthandAnim";
  assert_not_equals(Object.keys(style).indexOf('animation'), -1);
  assert_not_equals(Object.keys(style).indexOf('webkitAnimation'), -1);
  assert_equals(style.animation, '0s ease 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "none";
  assert_not_equals(Object.keys(style).indexOf('animation'), -1);
  assert_not_equals(Object.keys(style).indexOf('webkitAnimation'), -1);
  assert_equals(style.animation, '0s ease 0s 1 normal none running none');
  assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running none');
  assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running none');
  assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running none');
  assert_true(checkAnimationShorthandValue());

  style.animation = "none 20s";
  assert_equals(style.animation, '20s ease 0s 1 normal none running none');
  assert_equals(computedStyle.animation, '20s ease 0s 1 normal none running none');
  assert_equals(style.webkitAnimation, '20s ease 0s 1 normal none running none');
  assert_equals(computedStyle.webkitAnimation, '20s ease 0s 1 normal none running none');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim none 20s";
  assert_equals(style.animation, '20s ease 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease 0s 1 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease 0s 1 normal none running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in none 20s";
  assert_equals(style.animation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in 20s";
  assert_equals(style.animation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in 20s 10s";
  assert_equals(style.animation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  // Let's double check here the delay and duration. As stated in the spec the first value parsed
  // is assigned to the duration.
  assert_equals(computedStyle.animationDuration, '20s');
  assert_equals(computedStyle.webkitAnimationDuration, '20s');
  assert_equals(computedStyle.animationDelay, '10s');
  assert_equals(computedStyle.webkitAnimationDelay, '10s');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim 20s ease-in 10s";
  assert_equals(style.animation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animationDuration, '20s');
  assert_equals(computedStyle.webkitAnimationDuration, '20s');
  assert_equals(computedStyle.animationDelay, '10s');
  assert_equals(computedStyle.webkitAnimationDelay, '10s');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim paused 20s ease-in 10s";
  assert_equals(style.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_equals(computedStyle.animationDuration, '20s');
  assert_equals(computedStyle.webkitAnimationDuration, '20s');
  assert_equals(computedStyle.animationDelay, '10s');
  assert_equals(computedStyle.webkitAnimationDelay, '10s');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in both 20s 5";
  assert_equals(style.animation, '20s ease-in 0s 5 normal both running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 0s 5 normal both running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 0s 5 normal both running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 normal both running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in 20s 5 backwards";
  assert_equals(style.animation, '20s ease-in 0s 5 normal backwards running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 0s 5 normal backwards running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 0s 5 normal backwards running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 normal backwards running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim forwards 20s 5";
  assert_equals(style.animation, '20s ease 0s 5 normal forwards running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease 0s 5 normal forwards running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease 0s 5 normal forwards running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease 0s 5 normal forwards running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in 20s 5";
  assert_equals(style.animation, '20s ease-in 0s 5 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 0s 5 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 0s 5 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 normal none running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim reverse ease-in 20s 5";
  assert_equals(style.animation, '20s ease-in 0s 5 reverse none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 0s 5 reverse none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 0s 5 reverse none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 reverse none running myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim reverse ease-in backwards 20s 5 paused";
  assert_equals(style.animation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in 20s 10s, width cubic-bezier(0.32, 0, 1, 1) 10s 20s";
  assert_equals(style.animation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  // Let's double check here the delay and duration. As stated in the spec the first value parsed
  // is assigned to the duration.
  assert_equals(computedStyle.animationDuration, '20s, 10s');
  assert_equals(computedStyle.webkitAnimationDuration, '20s, 10s');
  assert_equals(computedStyle.animationDelay, '10s, 20s');
  assert_equals(computedStyle.webkitAnimationDelay, '10s, 20s');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim ease-in 20s 10s paused, width cubic-bezier(0.32, 0, 1, 1) 10s 20s";
  assert_equals(style.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width');
  // Let's double check here the delay and duration. As stated in the spec the first value parsed
  // is assigned to the duration.
  assert_equals(computedStyle.animationDuration, '20s, 10s');
  assert_equals(computedStyle.webkitAnimationDuration, '20s, 10s');
  assert_equals(computedStyle.animationDelay, '10s, 20s');
  assert_equals(computedStyle.webkitAnimationDelay, '10s, 20s');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim reverse ease-in 20s 10s paused, test cubic-bezier(0.32, 0, 1, 1) 10s 20s both";
  assert_equals(style.animation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test');
  assert_true(checkAnimationShorthandValue());

  style.animation = "none, none";
  assert_equals(style.animation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none');
  assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none');
  assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none');
  assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none');

  style.animation = "ease-in test 20s 10s, none";
  assert_equals(style.animation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none');
  assert_equals(computedStyle.animationName, 'test, none');

  style.animation = "none, ease-in test 20s 10s";
  assert_equals(style.animation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test');
  assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test');
  assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test');
  assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test');
  assert_equals(computedStyle.animationName, 'none, test');

  style.animation = "myShorthandAnim both 20s 10s ease-in paused, myShorthandAnim ease-out 20s";
  assert_equals(style.animation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim');

  style.animation = "myShorthandAnim ease-in 4 20s 10s backwards, myShorthandAnim2 50 ease-out 20s";
  assert_equals(style.animation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2');
  assert_equals(computedStyle.animation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2');
  assert_equals(style.webkitAnimation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2');
  assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2');
  assert_true(checkAnimationShorthandValue());

  style.animation = "myShorthandAnim2 reverse ease-out 20s, ease-in myShorthandAnim 20s 10s paused";
  assert_equals(style.animation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_equals(computedStyle.animation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_equals(style.webkitAnimation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_equals(computedStyle.webkitAnimation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim');
  assert_true(checkAnimationShorthandValue());
}, "Valid animation shorthand values.");

test(() => {
  style.animation = "";

  style.animation = "solid red green";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "all 30s width height ease-in";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "animName 30s ease-in 20s, 20px";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "test 30s ease-in 20s, step-start(2)";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "ease-in opacity top 20s 10s myAnim, none";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "none, ease-in opacity top 20s 10s myAnim";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = ",";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "running,";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = ", alternate";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = ", commas,";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "test,, 5s";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "2 initial";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "2 inherit";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "2 unset";
  assert_equals(style.animation, '');
  assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
  assert_equals(style.webkitAnimation, '');
  assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');

  style.animation = "2 default";
  assert_equals(style.animation, '0s ease 0s 2 normal none running default');
  assert_equals(computedStyle.animation, '0s ease 0s 2 normal none running default');
  assert_equals(style.webkitAnimation, '0s ease 0s 2 normal none running default');
  assert_equals(computedStyle.webkitAnimation, '0s ease 0s 2 normal none running default');
}, "Invalid animation shorthand values.");
</script>
</body>
</html>
